<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
            text-decoration: none;
            list-style: none;
            box-sizing: border-box;
            background-repeat: no-repeat;
        }

        .first-box {
            width: 100%;
            height: 40px;
            background: #333;

        }

        .first-box1 {
            width: 1226px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 auto;
            /* background-color: red; */
        }

        .first-box1 ul {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .first-box11 li,
        .first-box12 {
            color: #b0b0b0;
            line-height: 40px;
            font-size: 12px;
        }


        .first-box11 li:not(.first-box111):before {
            content: "丨";
            margin: 0 3px;
            color: #3C423F;
        }

        .first-box12 {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .first-box121 {
            margin-right: 10px;
        }

        .second-box {
            width: 1226px;
            height: 100px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            /* background-color: red; */

        }

        .second-box1 {
            width: 55px;
            height: 55px;
            /* background-color: yellow; */
            background-image: url(./image/xiaomi_logo.png);
            background-size: contain;
            /* display: flex;
            align-items: center;
            justify-content: space-between; */
        }

        .second-box2 {
            flex: 1;
            width: 580px;
            height: 100%;
            margin-left: 200px;
            /* background-color: blue; */
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .second-box21 {
            width: 600px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .second-box21 li {
            color: #b0b0b0;
            line-height: 40px;
            font-size: 14px;
        }

        .second-box22 {
            width: 250px;
            height: 50px;
            /* background-color: yellow; */
            display: flex;
            align-items: center;
            justify-content: space-between;
            border: 1px solid #999;
        }

        .second-box221 {
            width: 200px;
            height: 100%;
            border-right: 1px solid #999;
        }

        .second-box222 {

            width: 50px;
            height: 100%;
            line-height: 50px;
            text-align: center;
        }

        .third-box1 {
            width: 1226px;
            height: 460px;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            /* background-color: tomato; */
        }

        .third-box11 {
            width: 234px;
            height: 460px;
            display: flex;
            justify-content: space-between;
            flex-direction: column;
            background-color: #2E0C00;
            padding: 20px 0 20px 26px;
        }

        .third-box11 li {
            /* background-color: green; */
            color: #fff;
            /* background-color: greenyellow; */
            line-height: 40px;
            font-size: 14px;
            position: relative;
        }

        .third-box11 li span {
            position: absolute;
            right: 10px;

        }

        .third-box12 {
            width: 992px;
            height: 460px;
            /* background-color: greenyellow; */
            background-image: url(./image/T1jrxjB_VT1RXrhCrK.jpg);
            background-size: 100% 100%;
        }

        .forh-box {
            width: 1226px;
            height: 170px;
            margin: 15px auto;
            /* background-color: greenyellow; */
            display: flex;
            align-items: center;
            justify-content: space-between;

        }

        .forh-box1 {
            width: 234px;
            height: 170px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            background-color: #605750;
            padding: 10px 10px;
        }

        .forh-box1 li {
            width: 65px;
            height: 70px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
            /* background-color: red; */


        }

        .forh-box1 li div {
            color: #fff;
            line-height: 40px;
            font-size: 12px;
        }

        .forh-box11 {
            border: 1px solid;
            border-color: transparent #999 #999 transparent;
        }

        .forh-box12 {
            border: 1px solid;
            border-color: transparent #999 #999 #999;
        }

        .forh-box13 {
            border: 1px solid;
            border-color: transparent transparent #999 #999;
        }

        .forh-box14 {
            border: 1px solid;
            border-color: #999 #999 transparent transparent;
        }

        .forh-box15 {
            border: 1px solid;
            border-color: #999 #999 transparent #999;
        }

        .forh-box16 {
            border: 1px solid;
            border-color: #999 transparent transparent #999;
        }

        .forh-box2 {
            flex: 1;
            height: 170px;
            /* background-color: yellow; */
            margin-left: 10px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .forh-box2 li {
            width: 316px;
            height: 170px;
            /* background-color: tomato; */
            background-image: url(./image/T1yvd_BQDT1RXrhCrK.jpg);
        }

        .fifth-box {
            width: 1226px;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
            /* background-color: red; */
            margin: 0 auto;

        }

        .fifth-box1 {
            width: 1226px;
            height: 58px;
            display: flex;
            align-items: center;
            /* background-color: blue; */
            justify-content: space-between;
        }

        .fifth-box11 {
            font-size: 22px;
            color: #333;
        }

        .fifth-box12 {
            display: flex;
            align-items: center;
            /* background-color: blue; */
            justify-content: space-between;
        }

        .fifth-box12 div {
            width: 36px;
            height: 24px;
            border: 1px solid #999;
            margin-left: 2px;
            text-align: center;
        }

        .fifth-box2 {
            display: flex;
            width: 1226px;
            align-items: center;
            /* background-color: blue; */
            justify-content: space-between;
        }

        .fifth-box2 li {
            width: 234px;
            height: 340px;
            background-color: #FAFAFA;
            /* margin: 0 2px; */
            border-top: 1px solid #FCB280;

            display: flex;
            align-items: center;
            /* background-color: blue; */
            justify-content: space-between;
            flex-direction: column;
            padding: 20px 10px;
        }

        .fifth-box2 li div {
            text-align: center;
            font-size: 14px;
            width: 234px;
        }

        .fifth-box22 {
            color: #333;
        }

        .fifth-box23 {
            color: #AFB2B1;
        }

        .fifth-box21 {
            height: 200px;
            /* background-color: coral; */
            background-image: url(./image/T19AbjBCDT1RXrhCrK.jpg);
            background-position: 36px 0px;
        }

        .sixed-bxo {
            width: 100%;
            height: 725px;
            background-color: #F5F5F5;
            margin: 20px 0;
            padding: 20px;
        }

        .sixed-box {
            width: 1226px;
            height: 685px;
            margin: 0 auto;
            /* background-color: red; */
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
        }

        .sixed-box1 {
            width: 1226px;
            height: 58px;
            /* background-color: darkgreen; */
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .sixed-box11 {
            font-size: 22px;
            color: #333;
        }

        .sixed-box2 {
            width: 1226px;
            height: 614px;
            /* background-color: blue; */
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .sixed-box21 {
            width: 234px;
            height: 614px;
            background-image: url(./image/T1IhLjBC_T1RXrhCrK.jpg);

        }

        .sixed-box22 {
            width: 978px;
            height: 614px;
            display: flex;
            /* background-color: brown; */
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;

        }

        .sixed-box22 li {
            width: 234px;
            height: 300px;
            display: flex;
            align-items: center;
            background-color: #fff;
            justify-content: space-between;
            flex-direction: column;
            padding: 20px 0;
        }

        .sixed-box221 {
            width: 120px;
            height: 120px;
            background-image: url(./image/T1odEjB5bT1RXrhCrK.jpg);
            background-size: contain;
            background-color: blue;


        }

        .sixed-box222 {
            font-size: 14px;
            color: #333;
        }

        .sixed-box223 {
            font-size: 12px;
            color: #999;
        }

        .sixed-box224 {
            font-size: 12px;
            color: #FB8B40;
        }

        .seventh-box {
            width: 1226px;
            height: 240px;
            display: flex;
            margin: 0 auto;
            align-items: center;
            /* background-color: green; */
            justify-content: space-between;
            flex-direction: column;
        }

        .seventh-box1 {
            width: 700px;
            height: 40px;
            margin: 0 auto;
            /* background-color: red; */
            /* border-bottom: 1px solid #b0b0b0; */
            /* display: flex;
            align-items: center;
   
            justify-content: space-between; */
        }

        .seventh-box1 li {
            color: #b0b0b0;
            line-height: 40px;
            font-size: 12px;
            display: inline-block;
        }

        .seventh-box1 li:not(.seventh-box11):before {
            content: "丨";
            color: #b0b0b0;
            margin: 0 28px;

        }

        .seventh-box2 {
            width: 1226px;
            height: 200px;
            border-top: 1px solid #b0b0b0;
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            /* background-color: red; */
        }

        .seventh-box21 {
            width: 600px;
            height: 150px;
            /* background-color: red; */
            margin-left: 150px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .seventh-box21 dl {
            width: 150px;
            height: 150px;
            display: flex;
            line-height: 150px;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
            font-size: 12px;
        }

        .seventh-box21 dl dt {
            height: 50px;
            line-height: 50px;
            width: 180px;
            color: #333;
            text-align: center;
        }

        .seventh-box21 dl dd {
            height: 20px;
            line-height: 20px;
            width: 180px;
            color: #b0b0b0;
            text-align: center;
        }

        .seventh-box22 {
            height: 150px;
            width: 250px;
            display: flex;
            line-height: 150px;
            align-items: center;
            justify-content: space-between;
            flex-direction: column;
            /* background-color: red; */
            margin-top: 37px;
            border-left: 1px solid #b0b0b0;
        }

        .seventh-box221 {
            height: 20px;
            line-height: 20px;
            /* background-color: green; */
            color: #F96C29;
            font-size: 22px;
        }

        .seventh-box222 {
            height: 20px;
            line-height: 20px;
            color: #333;
            font-size: 14px;
        }

        .seventh-box223 {
            width: 150px;
            height: 30px;
            line-height: 30px;
            color: #F96C29;
            font-size: 14px;
            text-align: center;
            border: 1px solid #F96C29;
        }

        .eighth-box {
            width: 100%;
            height: 80px;
            background-color: #F5F5F5;
            position: relative;
        }

        .eighth-box1 {
            height: 50px;
            line-height: 60px;
            margin-left: 200px;

        }

        .eighth-box1 li,
        .eighth-box1 span {
            font-size: 12px;
            color: #919A9D;
            display: inline-block;
        }

        .eighth-box1 li:not(.eighth-box11):before {
            content: "丨";
            margin: 0 2px;
        }

        .eighth-box2 {
            width: 40px;
            height: 40px;
            position: absolute;
            background-color: #F76801;
            top: 20px;
            left: 157px;
            background-image: url(./image/mi-logo.png);
            background-size: contain;
        }
    </style>
</head>

<body>
    <!-- <img src="./image/mi-logo.jpg" alt=""> -->
    <div class="first-box">
        <div class="first-box1">
            <ul class="first-box11">
                <li class="first-box111">大米网</li>
                <li>MIUI</li>
                <li>米聊</li>
                <li>游戏</li>
                <li>多看阅读</li>
                <li>云服务</li>
                <li>大米移动版</li>
                <li>问题反馈</li>
                <li>Select</li>
                <li>Region</li>
            </ul>
            <div class="first-box12">
                <div class="first-box121">
                    登陆 丨 注册
                </div>
                <div class="first-box121">
                    购物车（0）
                </div>
            </div>
        </div>

    </div>
    <div class="second-box">
        <div class="second-box1">

        </div>
        <div class="second-box2">
            <ul class="second-box21">
                <li>大米手机</li>
                <li>红米</li>
                <li>平板</li>
                <li>电视</li>
                <li>盒子</li>
                <li>路由器</li>
                <li>智能硬件</li>
                <li>服务</li>
                <li>社区</li>
            </ul>
            <div class="second-box22">
                <div class="second-box221">

                </div>
                <div class="second-box222">
                    GO
                </div>
            </div>
        </div>

    </div>
    <div class="third-box1">
        <ul class="third-box11">
            <li>手机 平板 <span> &gt;</span></li>
            <li>电视 盒子<span> &gt;</span></li>
            <li>路由器 智能配件<span> &gt;</span></li>
            <li>移动电源 插线板<span> &gt;</span></li>
            <li>耳机 音箱<span> &gt;</span></li>
            <li>电池 存储卡<span> &gt;</span></li>
            <li>保护套 后盖<span> &gt;</span></li>
            <li>贴膜 其它配件<span> &gt;</span></li>
            <li>米兔 服装<span> &gt;</span></li>
            <li>背包 其它周边<span> &gt;</span></li>
        </ul>
        <div class="third-box12">

        </div>
    </div>
    <div class="forh-box">
        <ul class="forh-box1">
            <li class="forh-box11">
                <div>START</div>
                <div>开放购买</div>
            </li>
            <li class="forh-box12">
                <div>GROUND</div>
                <div>企业团购</div>
            </li>
            <li class="forh-box13">
                <div>RETROFIT</div>
                <div>官方产品</div>
            </li>
            <li class="forh-box14">
                <div>CHANNEL</div>
                <div>F码通道</div>
            </li>
            <li class="forh-box15">
                <div>RECHARGE</div>
                <div>话费充值</div>
            </li>
            <li class="forh-box16">
                <div>SECURITY</div>
                <div>防伪检查</div>
            </li>
        </ul>
        <ul class="forh-box2">
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="fifth-box">
        <div class="fifth-box1">
            <div class="fifth-box11">
                大米明星单品
            </div>
            <div class="fifth-box12">
                <div>&LT;</div>
                <div>&gt;</div>
            </div>

        </div>
        <ul class="fifth-box2">
            <li>
                <div class="fifth-box21"></div>
                <div class="fifth-box22">大米平板</div>
                <div class="fifth-box23">全球首款 NVIDIA Tegra K1 平板</div>
            </li>
            <li>
                <div class="fifth-box21"></div>
                <div class="fifth-box22">大米平板</div>
                <div class="fifth-box23">全球首款 NVIDIA Tegra K1 平板</div>
            </li>
            <li>
                <div class="fifth-box21"></div>
                <div class="fifth-box22">大米平板</div>
                <div class="fifth-box23">全球首款 NVIDIA Tegra K1 平板</div>
            </li>
            <li>
                <div class="fifth-box21"></div>
                <div class="fifth-box22">大米平板</div>
                <div class="fifth-box23">全球首款 NVIDIA Tegra K1 平板</div>
            </li>
            <li>
                <div class="fifth-box21"></div>
                <div class="fifth-box22">大米平板</div>
                <div class="fifth-box23">全球首款 NVIDIA Tegra K1 平板</div>
            </li>
        </ul>
    </div>
    <div class="sixed-bxo">
        <div class="sixed-box">
            <div class="sixed-box1">
                <div class="sixed-box11">智能硬件</div>
            </div>
            <div class="sixed-box2">
                <div class="sixed-box21">

                </div>
                <ul class="sixed-box22">
                    <li>
                        <div class="sixed-box221">

                        </div>
                        <div class="sixed-box222">
                            大米智能家庭套装
                        </div>
                        <div class="sixed-box223">
                            3分钟快速安装，30多种智能玩法
                        </div>
                        <div class="sixed-box224">
                            199元
                        </div>
                    </li>
                    <li>
                        <div class="sixed-box221">

                        </div>
                        <div class="sixed-box222">
                            大米智能家庭套装
                        </div>
                        <div class="sixed-box223">
                            3分钟快速安装，30多种智能玩法
                        </div>
                        <div class="sixed-box224">
                            199元
                        </div>
                    </li>
                    <li>
                        <div class="sixed-box221">

                        </div>
                        <div class="sixed-box222">
                            大米智能家庭套装
                        </div>
                        <div class="sixed-box223">
                            3分钟快速安装，30多种智能玩法
                        </div>
                        <div class="sixed-box224">
                            199元
                        </div>
                    </li>
                    <li>
                        <div class="sixed-box221">

                        </div>
                        <div class="sixed-box222">
                            大米智能家庭套装
                        </div>
                        <div class="sixed-box223">
                            3分钟快速安装，30多种智能玩法
                        </div>
                        <div class="sixed-box224">
                            199元
                        </div>
                    </li>
                    <li>
                        <div class="sixed-box221">

                        </div>
                        <div class="sixed-box222">
                            大米智能家庭套装
                        </div>
                        <div class="sixed-box223">
                            3分钟快速安装，30多种智能玩法
                        </div>
                        <div class="sixed-box224">
                            199元
                        </div>
                    </li>
                    <li>
                        <div class="sixed-box221">

                        </div>
                        <div class="sixed-box222">
                            大米智能家庭套装
                        </div>
                        <div class="sixed-box223">
                            3分钟快速安装，30多种智能玩法
                        </div>
                        <div class="sixed-box224">
                            199元
                        </div>
                    </li>
                    <li>
                        <div class="sixed-box221">

                        </div>
                        <div class="sixed-box222">
                            大米智能家庭套装
                        </div>
                        <div class="sixed-box223">
                            3分钟快速安装，30多种智能玩法
                        </div>
                        <div class="sixed-box224">
                            199元
                        </div>
                    </li>
                    <li>
                        <div class="sixed-box221">

                        </div>
                        <div class="sixed-box222">
                            大米智能家庭套装
                        </div>
                        <div class="sixed-box223">
                            3分钟快速安装，30多种智能玩法
                        </div>
                        <div class="sixed-box224">
                            199元
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="seventh-box">
        <ul class="seventh-box1">
            <li class="seventh-box11">1小时快修服务</li>
            <li>7天无理由退货</li>
            <li>15天免费换货</li>
            <li>满150元包邮</li>
            <li>520余家售后网点</li>
        </ul>
        <div class="seventh-box2">
            <div class="seventh-box21">
                <dl>
                    <dt>
                        帮助中心
                    </dt>
                    <dd>购物指南</dd>
                    <dd>支付方式</dd>
                    <dd>配送方式</dd>
                </dl>
                <dl>
                    <dt>
                        帮助中心
                    </dt>
                    <dd>购物指南</dd>
                    <dd>支付方式</dd>
                    <dd>配送方式</dd>
                </dl>
                <dl>
                    <dt>
                        帮助中心
                    </dt>
                    <dd>购物指南</dd>
                    <dd>支付方式</dd>
                    <dd>配送方式</dd>
                </dl>
                <dl>
                    <dt>
                        帮助中心
                    </dt>
                    <dd>购物指南</dd>
                    <dd>支付方式</dd>
                    <dd>配送方式</dd>
                </dl>
            </div>
            <div class="seventh-box22">
                <div class="seventh-box221">
                    400-100-5678
                </div>
                <div class="seventh-box222">
                    周一至周日
                </div>
                <div class="seventh-box222">
                    仅收市话费）
                </div>
                <div class="seventh-box223">
                    24小时在线客服
                </div>
            </div>
        </div>
    </div>
    <div class="eighth-box">
        <ul class="eighth-box1">
            <li class="eighth-box11">大米网</li>
            <li>MIUI</li>
            <li>米聊</li>
            <li>多看书城</li>
            <li>大米路由器</li>
            <li>大米后院</li>
            <li>大米天猫店</li>
            <li>大米淘宝直营店</li>
            <li>大米网盟</li>
            <li>问题反馈</li>
            <li>Select</li>
            <span>Region</span>
            <span>5555555号</span>
        </ul>
        <div class="eighth-box2">


        </div>

    </div>
</body>

</html>